# -*- mode: snippet -*-
# contributor: Chen Bin <chenbin DOT sh AT gmail>
# name: <html> angular only
# key: html5.
# --
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <title>Angular Sandbox (without Bootstrap)</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
    <style type="text/css"></style>
  </head>
  <body>
    <div class="container" ng-controller="MainCtrl">
      <h1>{{ getMessage() }}</h1>
      <button ng-click="clickMe()" >Click Me</button>
    </div>
    <script type="text/javascript">
     angular.module('myApp', []).controller('MainCtrl', ['$scope', '$filter', function($scope, $filter) {
       $0
       $scope.count = 1;
       $scope.message = 'Hello World ';
       $scope.getMessage = function( ) {
         return $scope.message + $scope.count + ($scope.count>1? ' times':' time');
       };
       $scope.clickMe = function() {
         $scope.count++;
       };
     }]);
    </script>
  </body>
</html>